<template>
  <!-- 兼容 iconfont图标库 -->
  <!-- 兼容element-plus -->
  <cl-tooltip :content="props.tooltip" :disabled="!props.tooltip">
    <i
      v-if="props.icon.startsWith('icon-')"
      :class="`${props.icon} iconfont`"
      :style="{
        color: props.color,
        fontSize: props.size + 'px',
      }"
      v-bind="$attrs"
    ></i>

    <el-icon v-else :size="props.size" :color="props.color" v-bind="$attrs">
      <component :is="icon"></component>
    </el-icon>
  </cl-tooltip>
</template>
<script setup lang="ts">
// 即使此组件被使用多次，ElementPlusIconsVue也只会被引用一次
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

// 禁用透传继承
defineOptions({
  inheritAttrs: false,
});

interface Props {
  icon: string;
  color?: string; //svg 的 fill 颜色
  size?: string | number; //svg 图标的大小，size x size
  tooltip?: string;
}

const props = withDefaults(defineProps<Props>(), {
  // color: "#9c9da0",
  size: "16px",
  tooltip: "",
});

const icon = computed(
  () => ElementPlusIconsVue[props.icon as keyof typeof ElementPlusIconsVue]
);
</script>
